<template>
 <!-- hbx 2022-07-04 -->
    <div id="scenicList">
    <div>
      <el-row>
        <el-card class="box-card">
          <el-row>
            <el-col :span="4" style="float: left">
              <el-input placeholder="请输入内容" v-model="scenicName" clearable></el-input>
            </el-col>
            <el-col :span="2" style="float: left;">
              <el-button type="primary" @click="findScenicByName()" icon="el-icon-search" ></el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="savenAdd" round>新增</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="saveRefresh" round>刷新</el-button>
            </el-col>
          </el-row>
          <el-row>
          <el-card class="box-card">
          <el-col :span="4" style="height:835px;overflow:hidden;overflow: auto;">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
              @node-click='getScenicAllByCityId'
            >
            </el-tree>
          </el-col>
          <!-- 景区列表内容展示 -->
          <el-col :span="20">
            <el-table :data="scenicDate" border style="width: 100%">
              <el-table-column fixed prop="scenicName" label="景区名称" width="190">
              </el-table-column>
              <el-table-column prop="briefIntroduction" label="景区简介" width="160">
              </el-table-column>
              <el-table-column prop="scenicAddress" label="景区地址" width="200">
              </el-table-column>
              <el-table-column prop="officialPhone" label="官方电话" width="130">
              </el-table-column>
              <el-table-column prop="openingTime" label="开放时间" width="130">
                <template slot-scope="scope">
                  <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                    {{scope.row.openingTime}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="announcementInformation" label="公告信息" width="300">
                <template slot-scope="scope">
                  <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                    {{scope.row.announcementInformation}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="门票价格" width="130">
              </el-table-column>
              <el-table-column prop="introduce" label="景区详细介绍" width="230">
                <template slot-scope="scope">
                  <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                    {{scope.row.introduce}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="preferentialTreatment" label="优待政策" width="130">
                  <template slot-scope="scope">
                  <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                    {{scope.row.preferentialTreatment}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="220">
              </el-table-column>
              <el-table-column prop="updateTime" label="更新时间" width="220">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button @click="scenicDetail(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看
                  </el-button>
                  <el-button type="text" @click="scenicEdit(scope.row)" size="small"><i class="el-icon-edit"></i>编辑
                  </el-button>
                  <el-button type="text" @click="deleteScenic(scope.row.id)" size="small"><i class="el-icon-delete"></i>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          </el-card>
          </el-row>
          <div class="block">
            <el-row>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
              </el-pagination>
            </el-row>
          </div>
        </el-card>
      </el-row>
      <!-- 数据新增功能 -->
      <el-dialog title="新增景区景点"  class="scenicDialog" :visible.sync="dialogFormVisible" @close="resetForms('ruleForm')">
        <el-form :model="scenicForm" :rules="rules" ref="ruleForm">
          <el-form-item>
            <el-upload
            class="avatar-uploader"
            style="width:920px"
            action=""
            :on-preview="handlePictureCardPreview"
            :multiple="true"
            :on-remove="handleRemove"
            :on-change="handlechange"
            list-type="picture-card"
            :before-upload="beforeAvatarUpload"
            accept=".jpg,.jpeg,.png,.gif"
            :auto-upload="false"
            :file-list="editScenicFileList"
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl">
            </el-dialog>
          </el-form-item>
          <el-form-item label="景区名称" :label-width="formLabelWidth" prop="scenicName">
            <el-input
              v-model="scenicForm.scenicName"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="景区简介" :label-width="formLabelWidth" prop="briefIntroduction">
            <el-input v-model="scenicForm.briefIntroduction" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="景区地址" :label-width="formLabelWidth" prop="scenicAddress">
            <el-input
              v-model="scenicForm.scenicAddress"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="景区开放时间" :label-width="formLabelWidth" prop="openingTime">
            <el-input
              v-model="scenicForm.openingTime"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="景区官方电话" :label-width="formLabelWidth" prop="officialPhone">
            <el-input v-model="scenicForm.officialPhone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="景区公告信息" :label-width="formLabelWidth" prop="announcementInformation">
            <el-input v-model="scenicForm.announcementInformation" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="景区详细介绍" :label-width="formLabelWidth" prop="introduce">
            <el-input v-model="scenicForm.introduce" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="景区优待政策信息" :label-width="formLabelWidth" prop="preferentialTreatment">
            <el-input v-model="scenicForm.preferentialTreatment" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="景区门票价格" :label-width="formLabelWidth" prop="price">
            <el-input v-model="scenicForm.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="城市名称" :label-width="formLabelWidth" prop="cityId">
            <el-select v-model="scenicForm.provinceId"  placeholder="请选择省份" @change="getNameByPidCity()" >
              <el-option
                v-for="item in provincess"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <!-- 市下拉框 -->
            <el-select v-model="scenicForm.cityId" placeholder="请选择市">
              <el-option
                v-for="item in citys"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择景区所在地" :label-width="formLabelWidth">
            <el-button
              type="primary"
              plain
              @click='saveLeafletClick()'
              >选择景区所在城市</el-button
            >
          </el-form-item>
          <el-form-item label="地图竖标" :label-width="formLabelWidth" prop="lng">
            <el-input v-model="scenicForm.lng" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="地图横标" :label-width="formLabelWidth" prop="lat">
            <el-input v-model="scenicForm.lat" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" destroy-on-close>取 消</el-button>
          <el-button type="primary" @click="saveScenic('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 景区信息数据查看功能 -->
      <el-dialog title="商品详情" class="scenicDialog"  :visible.sync="dialogFormVisibleDetail">
        <el-form :model="scenicFormDetail">
          <el-form-item>
					<div class="demo-image__preview">
					<el-image
						style="width: 100px; height: 100px"
						:src="scenicFileListUrl"
						:preview-src-list="scenicFileList">
					</el-image>
					</div>
				</el-form-item>
          <el-form-item label="景区名称" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.scenicName"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区简介" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.briefIntroduction"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区开放时间" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.openingTime"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区官方电话" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.officialPhone"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
           <el-form-item label="景区公告信息" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.announcementInformation"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="地图竖标" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.lng"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="地图横标" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.lat"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
            <el-form-item label="景区详细介绍" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.introduce"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区优待政策信息" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.preferentialTreatment"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
            <el-form-item label="景区门票价格" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.price"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
           <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.createTime"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
           <el-form-item label="更新时间" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormDetail.updateTime"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleDetail = false">关 闭</el-button>
        </div>
      </el-dialog>
      <!-- 景区信息数据修改 -->
      <el-dialog title="编辑景区景点" class="scenicDialog"  :visible.sync="dialogFormVisibleEdit"  @close="resetForms('ruleForm')">
        <el-form :model="scenicFormEdit"  :rules="rules" ref="ruleForm">
          <el-form-item>
            <el-upload
            class="avatar-uploader"
            style="width:920px"
            action=""
            :on-preview="handlePictureCardPreviewEdit"
            :multiple="true"
            :on-remove="handleRemoveEdit"
            :on-change="handlechangeEdit"
            list-type="picture-card"
            :before-upload="beforeAvatarUpload"
            accept=".jpg,.jpeg,.png,.gif"
            :auto-upload="false"
            :file-list="editScenicFileList"
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrlEdit">
            </el-dialog>
          </el-form-item>
          <el-form-item label="景区名称" :label-width="formLabelWidth">
            <el-input
              v-model="scenicFormEdit.scenicName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区简介" :label-width="formLabelWidth" prop="briefIntroduction">
            <el-input
              v-model="scenicFormEdit.briefIntroduction"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区地址" :label-width="formLabelWidth" prop="scenicAddress">
            <el-input
              v-model="scenicFormEdit.scenicAddress"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区开放时间" :label-width="formLabelWidth" prop="openingTime">
            <el-input
              v-model="scenicFormEdit.openingTime"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区官方电话" :label-width="formLabelWidth" prop="officialPhone">
            <el-input
              v-model="scenicFormEdit.officialPhone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区公告信息" :label-width="formLabelWidth" prop="景区公告信息">
            <el-input
              v-model="scenicFormEdit.announcementInformation"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区详细介绍" :label-width="formLabelWidth" prop="introduce">
            <el-input
              v-model="scenicFormEdit.introduce"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区优待政策" :label-width="formLabelWidth" prop="preferentialTreatment">
            <el-input
              v-model="scenicFormEdit.preferentialTreatment"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区门票价格" :label-width="formLabelWidth" prop="price">
            <el-input
              v-model="scenicFormEdit.price"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="景区城市" :label-width="formLabelWidth" prop="cityId">
           <el-select v-model="scenicFormEdit.provinceId" placeholder="请选择省" @change="getNameByPidCityEdit()">
              <el-option
                v-for="item in provinces"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <!-- 市下拉框 -->
            <el-select v-model="scenicFormEdit.cityId" placeholder="请选择市" >
              <el-option
                v-for="item in cityss"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
                    <el-form-item label="选择景区所在地" :label-width="formLabelWidth" prop="lng">
            <el-button
              type="primary"
              plain
              @click='editLeafletClick()'
              >选择景区所在城市</el-button
            >
          </el-form-item>
          <el-form-item label="地图坐标竖标" :label-width="formLabelWidth" prop="lng">
            <el-input
              v-model="scenicFormEdit.lng"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="地图坐标横标" :label-width="formLabelWidth" prop="lat">
            <el-input
              v-model="scenicFormEdit.lat"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
          <el-button type="primary" @click="editScenicById('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增内嵌地图弹框 -->
      <el-dialog
        title="地图"
        :visible.sync="saveLeafletDialohFormVisible"
        width="50%"
        @opened=saveOpened
        append-to-body
        :fullscreen="false"
        :destroy-on-close="true"
      >
        鼠标右击地图位置记录坐标
        <!-- 地图容器 -->
        <div id='map'></div>
      </el-dialog>
      <!-- 修改内嵌地图弹框 -->
      <el-dialog
        title="地图"
        :visible.sync="editLeafletDialohFormVisible"
        width="50%"
        @opened=editOpened
        append-to-body
        :fullscreen="false"
        :destroy-on-close="true"
      >
        鼠标右击地图位置记录坐标
        <!-- 地图容器 -->
        <div id='editMap'></div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import icon from '@/assets/marker-icon.png'
const axios = require('axios')
export default {
  template: 'scenicList',
  data () {
    // 校验景区名称是否重复
    var validatePass = (rule, value, callback) => {
      axios.get('http://127.0.0.1:8082/scenic/scenicAllByScenicName?scenicName=' + value).then(res => {
        this.name = res.data.obj
        this.name.forEach((item) => {
          this.b = item.scenicName
        })
        if (value === this.b) {
          callback(new Error('景区名称重复'))
        }else {
          callback()
        }
      })
    } 
    // 校验景区城市
    var validatePass2 = (rule, value, callback) => {
      if(value=== ''){
        callback(new Error('请选择城市'))
      }else {
        callback()
      }
    } 
    // 分页
    return {
      // 县
      city: '',
      // Pid
      pId: '',
      cityPid: '',
      // 存放是 数组
      citys: [],
      // 存放省 数组
      provinces: [],
      // 树查询名称
      filterText: '',
      filterTextEdit: '',
      filterTextSave: '',
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      dialogImageUrl: '',
      dialogImageUrlEdit: '',
      dialogVisible: false,
      editScenicFileList: [], // 编辑时数据回显图片
      fileList: [], // 图片集合
      imageUrl: '',
      imageFile: File,
      scenicFileListUrl: '',
      scenicFileList: [],
      scenicNames: '', // 校验景区名称
      // 校验规则
      rules: {
        scenicName: [
          { validator: validatePass, trigger: 'blur' },
          { required: true, message: '请输入景区名称', trigger: 'blur' }
        ],
        briefIntroduction: [
          { required: true, message: '请输入景区简介', trigger: 'blur' }
        ],
        scenicAddress: [
          { required: true, message: '请输入景区地址', trigger: 'blur' }
        ],
        openingTime: [
          { required: true, message: '请输入景区开放时间', trigger: 'blur' }
        ],
        officialPhone: [
          { required: true, message: '请输入景区官方电话', trigger: 'blur' }
        ],
        announcementInformation: [
          { required: true, message: '请输入景区公告信息', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入景区详细介绍', trigger: 'blur' }
        ],
        preferentialTreatment: [
          { required: true, message: '请输入景区优待政策', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入景区价格', trigger: 'blur' }
        ],
        cityId: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        lng: [
          { required: true, message: '请输入景区竖标', trigger: 'mouseout' }
        ],
        lat: [
          { required: true, message: '请输入景区横标', trigger: 'mouseout' }
        ]
      },
      // 分页默认页数
      currentPage4: 1,
      dialogFormVisibleEdit: false, // 修改景区数据弹窗
      dialogFormVisibleDetail: false, // 查看景区数据弹窗
      ScenicHomeImage: false, // 新增景区首页图片数据弹窗
      scenicTheeDialohFormVisible: false,
      cityIds: '', // 景区城市id
      scenicName: '', // 根据景区名字查询
      // 全查景区信息
      scenicDate: [],
      dialogFormVisible: false,
      scenicForm: {
        // 新增景区信息
        id: 0,
        scenicName: '',
        briefIntroduction: '',
        scenicAddress: '',
        openingTime: '',
        officialPhone: '',
        announcementInformation: '',
        lng: '',
        lat: '',
        introduce: '',
        preferentialTreatment: '',
        price: '',
        delFlag: 0,
        provinceId: '',
        cityId: '',
      },
      scenicFormDetail: {
        // 查看数据
        id: 0,
        userName: '',
        password: '',
        loginName: '',
        sex: '',
        age: '',
        sortNum: '',
        iphone: '',
        roleId: ''
      },
      scenicFormEdit: {
        // 修改景区信息
        id: 0,
        scenicName: '',
        briefIntroduction: '',
        scenicAddress: '',
        openingTime: '',
        officialPhone: '',
        announcementInformation: '',
        lng: '',
        lat: '',
        introduce: '',
        preferentialTreatment: '',
        price: '',
        cityId: '',
        provinceId: '',
        imageId: ''
      },
      citys: [], // 新增时市数组
      cityss: [], // 修改时查询市数组
      provincess: [], // 默认查询省数组
      data: [],
      formLabelWidth: '120px',
      // 分页
      defaultProps: {
        children: 'childs',
        label: 'name'
      },
      cityId: '',
      id: '',
      // map对象
      map: null,
      // 新增地图弹框状态属性
      saveLeafletDialohFormVisible: false,
      // 修改地图弹框状态属性
      editLeafletDialohFormVisible: false
    }
  },
  mounted () {
    // 初始化树数据
    this.getAreaTreeAll()
    this.getScenicAll()
    this.getNameByPidMoren()
  },
  watch: {
    ddd (e) {
      alert(1)
      console.log(e)
    },
    // 树过滤模糊查
    filterText (val) {
      this.$refs.tree.filter(val)
    },
    // 修改树过滤模糊查
    filterTextEdit (val) {
      this.$refs.tree.filter(val)
    },
    // 新增树过滤模糊查
    filterTextSave (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 新增弹窗关闭时清空表单
    resetForms (formName) {
     this.$refs[formName].resetFields()
    },
    // 根据pid查询省信息
    getNameByPidMoren () {
      this.pId = 0
      axios.get('http://127.0.0.1:8082/area/getNameByPid?pId=' + this.pId).then(res => {
        this.provincess = res.data.obj
      })
    },
    // 修改根据provinceId查询市信息
    getNameByPidCityEdit () {
      axios.get('http://127.0.0.1:8082/area/getNameByPid?pId=' + this.scenicFormEdit.provinceId).then(res => {
        this.cityss = res.data.obj
      })
    },
    // 新增根据provinceId查询市信息
    getNameByPidCity () {
      axios.get('http://127.0.0.1:8082/area/getNameByPid?pId=' + this.scenicForm.provinceId).then(res => {
        this.citys = res.data.obj
      })
    },
    // 二级联动根据Pid查询
    getNameByPid () {
      this.scenicFormEdit.cityId = ''
      this.scenicForm.cityId = ''
      axios.get('http://127.0.0.1:8082/area/getNameByPid?pId=' + this.pId).then(res => {
        if (this.pId === 0) {
          this.provinces = res.data.obj
        } else {
          this.citys = res.data.obj
        }
      })
    },
    // 地图选择
    saveLeafletClick () {
      this.saveLeafletDialohFormVisible = true
    },
    // 地图选择
    editLeafletClick () {
      this.editLeafletDialohFormVisible = true
    },
    // 新增地图弹框打开动画结束前渲染方法
    saveOpened () {
      this.saveMap()
    },
    // 修改地图弹框打开动画结束前渲染方法
    editOpened () {
      this.editMap()
    },
    // 新增地图弹框渲染方法
    saveMap () {
      if (document.getElementById('map')) {
        const that = this
        const map = this.$L.map('map', {
          center: [34.161818, 108.767477], // 中心位置
          zoom: 6, // 缩放等级
          attributionControl: true, // 版权控件
          zoomControl: true // 缩放控件
        })

        var LeafIcon = this.$L.Icon.extend({
          options: {
            iconSize: [25, 41], // 图标宽高
            iconAnchor: [13, 38], // 图标锚点
            shadowAnchor: [4, 62], // 阴影锚点
            popupAnchor: [0, -40] // 弹出框弹出位置，相对于图标锚点
          }
        })

        // 创建多个icon
        var greenIcon = new LeafIcon({
          iconUrl: icon
        })
        this.map = map // data上需要挂载
        this.$L.tileLayer(
          'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
          , { minZoom: 4 }).addTo(map) // 加载底图

        var marker = this.$L.marker()

        // 显示点击处的标点
        function onMapClick (e) {
          marker
            .setLatLng([e.latlng.lat, e.latlng.lng])
            .setIcon(greenIcon)
            .addTo(map)
          that.scenicForm.lat = e.latlng.lat
          that.scenicForm.lng = e.latlng.lng
          that.saveLeafletDialohFormVisible = false
          that.$refs.ruleForm.validate((valid) => {
            if (valid) {
              that.valid = valid
            }
          })
        }
        // 地图绑定事件，右击地图执行显示坐标方法
        map.on('click', onMapClick)
      } else {
        // alert(1)
      }
    },
    // 修改地图弹框渲染方法
    editMap () {
      if (document.getElementById('editMap')) {
        const that = this
        const map = this.$L.map('editMap', {
          center: [34.161818, 108.767477], // 中心位置
          zoom: 6, // 缩放等级
          attributionControl: true, // 版权控件
          zoomControl: true // 缩放控件
        })

        var LeafIcon = this.$L.Icon.extend({
          options: {
            iconSize: [25, 41], // 图标宽高
            iconAnchor: [13, 38], // 图标锚点
            shadowAnchor: [4, 62], // 阴影锚点
            popupAnchor: [0, -40] // 弹出框弹出位置，相对于图标锚点
          }
        })

        // 创建多个icon
        var greenIcon = new LeafIcon({
          iconUrl: icon
        })
        this.map = map // data上需要挂载
        this.$L.tileLayer(
          'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
          , { minZoom: 4 }).addTo(map) // 加载底图

        console.log(this.scenicFormEdit)

        var marker = this.$L.marker()
          marker
            .setLatLng([this.scenicFormEdit.lat, this.scenicFormEdit.lng])
            .setIcon(greenIcon)
            .addTo(map)

        // 显示点击处的标点
        function onMapClick (e) {
          marker
            .setLatLng([e.latlng.lat, e.latlng.lng])
            .setIcon(greenIcon)
            .addTo(map)
          that.scenicFormEdit.lat = e.latlng.lat
          that.scenicFormEdit.lng = e.latlng.lng
          that.editLeafletDialohFormVisible = false
        }
        // 地图绑定事件，右击地图执行显示坐标方法
        map.on('click', onMapClick)
      } else {
        // alert(1)
      }
    },
    // 图片上传之前的校验方法
    beforeAvatarUpload (file) {
      const isPNG = file.type === 'image/png'
      const isJPG = file.type === 'image/jpg'
      const isJPEG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isJPG && !isPNG && !isJPEG) {
        this.$message.error('上传头像图片只能是 JPG,格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      this.fileList.push(file)
      return true
    },
    handlechange (fileList) {
      this.fileList.push(fileList)
    },
    handleRemove (file) { // 删除照片
      if (file.id) {
        const imageId = this.scenicForm.imageId
        let arrImgIds = imageId.split(',')
        arrImgIds = arrImgIds.filter((item) => {
          return item !== file.id && item !== ''
        })
        this.scenicForm.imageId = arrImgIds.join(',')
      } else {
        this.fileList = this.fileList.filter((item) => {
          return (file.name !== item.name && file.url !== item.url)
        })
      }
    },
    handleRemoveEdit (file) { // 删除修改照片
      if (file.id) {
        const imageId = this.scenicFormEdit.imageId
        let arrImgIds = imageId.split(',')
        arrImgIds = arrImgIds.filter((item) => {
          return item !== file.id && item !== ''
        })
        this.scenicFormEdit.imageId = arrImgIds.join(',')
      } else {
        this.editScenicFileList = this.editScenicFileList.filter((item) => {
          return (file.name !== item.name && file.url !== item.url)
        })
      }
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePictureCardPreviewEdit (file) {
      this.dialogImageUrlEdit = file.url
      this.dialogVisible = true
    },
    // 树查询过滤查询（省市县树）
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 重置校验方法
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    NodeTree (data) {
      this.scenicForm.cityId = data.id
      this.scenicFormEdit.cityId = data.id
      this.scenicTheeDialohFormVisible = false
    },
    // 城市树全查
    getAreaTreeAll () {
      axios
        .get('http://127.0.0.1:8082/area/getAreaTreeAll')
        .then((res) => {
          this.data = res.data.obj.diySide
        })
        // .catch((error) => {})
    },
    handleSizeChange (ps) {
      this.page.pageSize = ps
      this.getScenicAll()
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (pn) {
      this.page.pageNum = pn
      this.getScenicAll()
      // console.log(`当前页: ${val}`)
    },
    // 根据景区名称查询分页
    findScenicByName () {
      this.page.pageNum = 1
      this.currentPage4 = 1
      axios
        .get('http://127.0.0.1:8082/scenic/findScenicByName', {
          params: {
            pageSize: this.page.pageSize,
            pageNum: this.page.pageNum,
            scenicName: this.scenicName
          }
        })
        .then((res) => {
          this.scenicDate = res.data.obj.content
          this.page.total = res.data.obj.total
        })
    },
    // 点击树查询分页
    getScenicAllByCityId (data) {
      this.page.pageNum = 1
      this.currentPage4 = 1
      axios
        .get('http://127.0.0.1:8082/scenic/getScenicAllByCityId?cityId=' +data.id, {
          params: {
            pageSize: this.page.pageSize,
            pageNum: this.page.pageNum,
            cityId: this.cityId
          }
        })
        .then((res) => {
          this.scenicDate = res.data.obj.content
          this.page.total = res.data.obj.total
          console.log(res.data.obj.total)
        })
    },
    // 删除景区信息
    deleteScenic (row) {
      this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        } // 删除提示框
      )
        .then(() => {
          axios
            .delete('http://127.0.0.1:8082/scenic/deleteScenicById?id=' + row)
            .then((res) => {
              if (res.data.obj > 0) {
                this.message('删除成功', 'success')
                this.getScenicAll()
              } else {
                this.message('删除失败', 'warning')
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改
    handlechangeEdit (fileList) {
      this.editScenicFileList.push(fileList)
    },
    // 编辑景区信息
    scenicEdit (row) {
      this.getNameByPid()
      this.getNameByPidCityEdit()
      this.dialogFormVisibleEdit = true
      this.scenicFormEdit = row
      this.editScenicFileList = []
      this.scenicFormEdit.imageId = row.imageId
      const imageId = row.imageId
      if (imageId) {
        const imageArrId = imageId.split(',')
        if (imageArrId.length > 0) {
          const imgUrl = 'http://127.0.0.1:8082/getImageById?id='
          imageArrId.forEach(id => {
            if (id !== '') {
              this.editScenicFileList.push({ url: imgUrl + id, id: id })
            }
          })
        }
      }
    },
    // 修改景区景点
    editScenicById (ruleForm) {
      var formdata = new FormData()
      formdata.set('id', this.scenicFormEdit.id)
      formdata.set('scenicName', this.scenicFormEdit.scenicName)
      formdata.set('briefIntroduction', this.scenicFormEdit.briefIntroduction)
      formdata.set('scenicAddress', this.scenicFormEdit.scenicAddress)
      formdata.set('openingTime', this.scenicFormEdit.openingTime)
      formdata.set('officialPhone', this.scenicFormEdit.officialPhone)
      formdata.set('price', this.scenicFormEdit.price)
      formdata.set('announcementInformation', this.scenicFormEdit.announcementInformation)
      formdata.set('lng', this.scenicFormEdit.lng)
      formdata.set('lat', this.scenicFormEdit.lat)
      formdata.set('delFlag', this.scenicFormEdit.delFlag)
      formdata.set('introduce', this.scenicFormEdit.introduce)
      formdata.set('preferentialTreatment', this.scenicFormEdit.preferentialTreatment)
      formdata.set('provinceId', this.scenicFormEdit.provinceId)
      formdata.set('cityId', this.scenicFormEdit.cityId)
      formdata.set('imageId', this.scenicFormEdit.imageId)
      if (this.editScenicFileList.length > 0) {
        this.editScenicFileList.forEach((item) => {
          formdata.append('file', item.raw)
        })
      }
      this.$refs[ruleForm].validate((valid) =>{
        if (valid){
          axios.put('http://127.0.0.1:8082/scenic/editScenicById', formdata)
            .then((res) => {
              if (res.data.obj > 0) {
                this.message('恭喜你，修改数据成功！', 'success')
                this.dialogFormVisibleEdit = false
                this.getScenicAll()
                this.editScenicFileList = []
                this.imageUrl = ''
              this.fileList = []
              } else {
                this.message('对不起，修改失败！', 'warning')
              }
          })
        }
      })
    },
    // 景区录入信息界面刷新
    saveRefresh () {
       // 初始化树数据
       this.getAreaTreeAll()
       // 初始化列表数据
       this.getScenicAll()
    },
    // 新增按钮方法
    savenAdd () {
      this.editScenicFileList = []
      this.dialogFormVisible = true
      this.pId = 0
      this.getNameByPidMoren()
    },
    // 保存景区景点信息
    saveScenic (ruleForm) {
          var formdata = new FormData()
          formdata.set('scenicName', this.scenicForm.scenicName)
          formdata.set('briefIntroduction', this.scenicForm.briefIntroduction)
          formdata.set('scenicAddress', this.scenicForm.scenicAddress)
          formdata.set('openingTime', this.scenicForm.openingTime)
          formdata.set('officialPhone', this.scenicForm.officialPhone)
          formdata.set('price', this.scenicForm.price)
          formdata.set('announcementInformation', this.scenicForm.announcementInformation)
          formdata.set('lng', this.scenicForm.lng)
          formdata.set('lat', this.scenicForm.lat)
          formdata.set('delFlag', this.scenicForm.delFlag)
          formdata.set('introduce', this.scenicForm.introduce)
          formdata.set('preferentialTreatment', this.scenicForm.preferentialTreatment)
          formdata.set('cityId', this.scenicForm.cityId)
          formdata.set('provinceId', this.scenicForm.provinceId)
          debugger
          if (this.fileList.length > 0) {
            this.fileList.forEach((item) => {
               debugger
              formdata.append('file', item.raw)
            })
          }
          this.$refs[ruleForm].validate((valid) => {
            if (valid){
              debugger
               axios.post('http://127.0.0.1:8082/scenic/saveScenic', formdata)
              .then((res) => {
                if (res.data.obj > 0) {
                  this.message('恭喜你，保存数据成功！', 'success')
                  this.getScenicAll()
                  this.dialogFormVisible = false
                  this.scenicForm = {
                    id: 0,
                    scenicName: '',
                    briefIntroduction: '',
                    scenicAddress: '',
                    openingTime: '',
                    officialPhone: '',
                    announcementInformation: '',
                    lng: '',
                    lat: '',
                    introduce: '',
                    preferentialTreatment: '',
                    price: '',
                    delFlag: 0,
                    provinceId: '',
                    cityId: '',
                  }
                  this.editScenicFileList = []
                  this.imageUrl = ''
                  this.fileList = []
                } else {
                  this.message('对不起，保存失败！', 'warning')
                }
              })
            }
          })
    },
     // 全查景区信息
    getScenicAll () {
      axios
        .get('http://127.0.0.1:8082/scenic/getScenicAll', {
          params: {
            pageSize: this.page.pageSize,
            pageNum: this.page.pageNum,
          }
        })
        .then((res) => {
          this.scenicDate = res.data.obj.content
          this.page.total = res.data.obj.total
        })
    },
    // 查看景区信息详情
    scenicDetail (row) {
      this.getNameByPid()
      this.dialogFormVisibleDetail = true
      this.scenicFormDetail = row
      this.scenicFormEdit.imageId = row.imageId
      this.scenicFileList = []
      const imageId = row.imageId
      if (imageId) {
        const imageArrId = imageId.split(',')
        if (imageArrId.length > 0) {
          const imgUrl = 'http://127.0.0.1:8082/getImageById?id='
          this.scenicFileListUrl = imgUrl + imageArrId[0]
          imageArrId.forEach(id => {
            if (id !== '') {
              this.scenicFileList.push(imgUrl + id)
            }
          })
        }
      }
    },
    // 提示消息
    message (message, type) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style>
/* 新增地图容器大小 */
#map {
    width: 100%;
    height: 500px;
}
/* 修改地图容器大小 */
#editMap {
    width: 100%;
    height: 500px;
}
.cardTree {
  position: absolute;
  z-index: 9999;
}

/*设置tree每行的高度*/
.el-tree-node__content {
  height: 40px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-menu-demo {
  margin-left: 795px;
}

.p1:hover {
  border: 10px solid wheat;
}

.el-header,
.el-footer {
  background-color: #4f99fa;
  color: rgb(255, 255, 255);
  line-height: 60px;
}
body > .el-container {
  margin-bottom: 40px;
}
.scenicDialog{
  text-align: center;
}
body > .el-container {
  height: 100%;
}
html,
body {
  height: 100%;
}
</style>
